import Wrapper from "./style";
import {Button, QRCode} from "antd";
import close from "@/static/imgs/courseContent/关闭.svg";

import React, {CSSProperties} from "react";

const JoinClassDialog = () => {
    // 加课码
    const [text, /*setText*/] = React.useState('https://ant.design/');

    const btnStyle: CSSProperties = {
        width: '200px',
        height: '56px',
        fontSize: '22px',
        fontWeight: '500',
        borderRadius: '56px'
    }

    return (
        <Wrapper>
            <div className="join-code-dialog ">
                <div className='qrcode-box flex'>
                    <div className="left">
                        <div>
                            <h1 className='flex'>
                                <div>加课码:</div>
                                <div>SCEHL4</div>
                            </h1>
                            <h3>
                                微信扫一扫加入课堂
                            </h3>
                            <div className='code-container'>
                                <QRCode bgColor={'#fff'} style={{width: '100%', height: "100%"}} value={text || '-'}/>
                            </div>
                        </div>
                    </div>
                    <div className="right">
                        <div className="header">
                            <img src={close} alt=""/>
                        </div>
                        <div className="title-name">
                            <h2>asd</h2>
                            <h3>asd</h3>
                            <p>1</p>
                            <h3>已加课人数</h3>
                        </div>
                        <div className="btn-box">
                            <Button style={btnStyle} type="primary">返回</Button>
                        </div>
                    </div>
                </div>
            </div>
        </Wrapper>
    )
}
export default JoinClassDialog;